<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'index.jsp' starting page</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<script src="./js/jquery-1.6.2.min.js" ></script>
  </head>

<style type="text/css">
#select_div {
	float: left;
}
#right_div {
	float: left;
}

#result {
	font-size: 300px;
	color: red;
}
h1 {
	font-size: 80px;
	align: center;
}
</style>

<script>
	var timer;
	var selectedArr;
		
	$(document).ready(function(){
	
		$('#select_all').click(function(){
			//alert($('#select_all').attr('checked'));
			var selectVal = $('#select_all').attr('checked');
			$('#select_list input').each(function(){
				if ( selectVal == 'checked' )
					$(this).attr('checked', 'checked');
				else
					$(this).removeAttr('checked');
			});
		});
		
		$('#start_button').click(function(){
			//alert('start_button');
			timer = window.clearInterval(timer);
			selectedArr = new Array();
			$("#select_list input:checked").each(function(){
				//alert($(this).val());
				selectedArr.push($(this).val());
			});
			timer = self.setInterval("showName()", 20);
		});
		
		$('#stop_button').click(function(){
			//alert('stop_button');
			timer = window.clearInterval(timer);
		});
		
		$.get("servlet/ReadCandidatesServlet", 
			function(data){
				//alert(data);
				var candidates = data.split("\n");
				//alert(candidates);
				for (var i = 0; i < candidates.length; i ++)
				{
					if ( candidates[i] == "" )
						continue;
					var html = "<input type='checkbox' value='" + candidates[i] + "'/>" + candidates[i] + "<br/>";
					$("#select_list").append(html);	 
				}
		});
	});
	
			
	function showName (){
		var len = selectedArr.length;
		$('#result').html( selectedArr[Math.ceil(Math.random() * 100000) % len] );
	}
	
</script>
  <body>
    <h1>508教研室打水选择系统</h1>
    <div id="select_div">
	    <input type="checkbox" id="select_all"/>全选/反选
	    <br/><br/>
	    <div id="select_list">
	    </div>
	   	<div id="buttons">
		    <button id="start_button">开始</button>
			<button id="stop_button">停</button>
		</div>
    </div>
    <div id="right_div">
    	<h2>即将去打水的人是：</h2><br/>
	    <div id="result"></div>
	</div>
  </body>
</html>
